<template>

    <div id='tem'>
     <div class="slider">
         <slider :imgs="imgs"></slider>
     </div>
        <!--商品购买-->
        <div id="buy">
            <h4>{{info.title}}</h4>
            <p class="line"></p>
            <ul>
                <li class="price">
                    <s>市场价:￥{{info.market_price}}</s>
                    销售价:<span>￥{{info.sell_price}}</span>
                </li>
                <li class="re">购买数量：<inputNumber v-on:dataobj="getcount" class="fr"></inputNumber></li>
                <li>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small">加入购物车</mt-button>
                </li>
            </ul>
        </div>

        <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stock_quantity}}</li>
                <li>上架时间{{info.add_time|date('YYYY-MM-DD HH:mm:ss')}}</li>
            </ul>
        </div>

        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
            <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>

            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
            <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
    </div>

</template>

<script>
    import slider from '../subcom/slider.vue';
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';
    import inputNumber from '../subcom/inputNumber.vue';
    export default{
        components:{
            slider,
            inputNumber
        },
        data(){
            return{
                inputcount:1,
                id:0,
                imgs:[],
                info: {}
                 }
        },
        created(){
            this.id=this.$route.params.id;
            this.getimgs();
            this.getinfo();
        },
        methods:{
            getcount(count){
               this.inputcount=count;
            },
            getinfo(){
                var url=common.apidomain+'/api/goods/getinfo/'+this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.status!=0){
                        Toast(res.body.message)
                    }
                    this.info=res.body.message[0]
                })
            },
            getimgs(){
                var url=common.apidomain+"/api/getthumimages/"+this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.status!=0){
                        Toast(res.body.message)
                    }
                    this.imgs=res.body.message
                })
            }
        }
    }
</script>

<style scoped>
    .slider{
        border:1px solid rgba(0,0,0,.3);
        border-radius: 5px;
        margin: 5px;
    }
    #buy,#params,#other{
        margin: 5px;
        padding: 5px;
        border:1px solid rgba(0,0,0,.3);
        border-radius: 5px;
    }
    #buy li,#params li{
        list-style: none;
        padding: 6px;
    }
    #buy h4{
        color:#0094ff;
        padding: 5px;
    }
    .line{
        height: 1px;
        border: 1px solid rgba(0,0,0,.3);
    }
    #buy .price span{
        color:#f00;
    }
    #buy ul,#params ul{
        padding-left: 0;
    }
    #other .imgdesc{
        margin-bottom: 20px;
    }
    img{
        width: 100%;
    }
    .re{
        position: relative;
    }
    .fr{
        position: absolute;
        left: 100px;
        top: 5px;
    }
</style>